<template>
  <div id="home">
    <NavBar class="home-nav">
      <template v-slot:center>
        <span>购物街</span>
      </template>
    </NavBar>
    <TabControl
      class="tab-control-clone"
      ref="tabControl1"
      @tabclick="tabclick"
      :titles="['流行','新款','精选']"
      v-show="isFixedTab"
    />
    <Scroll
      class="home-scroll"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="handleScroll"
      @pullingUp="handlePullingUp"
    >
      <HomeSwiper @swiperImgLoad="swiperImgLoad" :swiper-list="banners" />
      <HomeRecommend :recommends-list="recommends" />
      <FeatureView />
      <TabControl ref="tabControl2" @tabclick="tabclick" :titles="['流行','新款','精选']" />
      <GoodsList :goods="showGoods" />
    </Scroll>
    <BackTop @click.native="backclick" v-show="isShowBackTop" />
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import HomeSwiper from "./children/HomeSwiper";
import HomeRecommend from "./children/HomeRecommend";
import FeatureView from "./children/FeatureView";
import TabControl from "@/components/content/tabControl/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import Scroll from "@/components/common/scroll/Scroll.vue";
// import BackTop from "@/components/content/backTop/BackTop.vue";

import { getHomeMultidata, getHomeGoods } from "@/network/home.js";
// import { debounce } from "@/common/utils.js";
import { itemListenerMixin, backTopMixin } from "@/common/mixin.js";

export default {
  name: "home",
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll
    // BackTop
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    }
  },
  mixins: [itemListenerMixin, backTopMixin],
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: {
          page: 0,
          list: []
        },
        new: {
          page: 0,
          list: []
        },
        sell: {
          page: 0,
          list: []
        }
      },
      currentType: "pop",
      // isShowBackTop: false,
      isPullUpLoad: false,
      isFixedTab: false,
      tabOffsetTop: 0,
      scrollY: 0
      // refresh: null
    };
  },
  mounted() {
    // 监听事件总线上的图片加载事件
    // let newRefresh = debounce(this.$refs.scroll.refresh);
    // this.refresh = () => {
    //   newRefresh();
    // };
    // this.$bus.$on("goodsItemImgLoad", this.refresh);
  },
  created() {
    this.getMultidata();

    this.getGoods("pop");
    this.getGoods("new");
    this.getGoods("sell");
  },
  methods: {
    /**
     * 网络请求相关方法
     */
    getMultidata() {
      getHomeMultidata()
        .then(res => {
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
        })
        .catch(err => {});
    },
    getGoods(type) {
      let page = this.goods[type].page + 1;
      getHomeGoods(type, page)
        .then(res => {
          this.goods[type].list.push(...res.data.list);
          this.goods[type].page += 1;

          // 完成上拉加载更多
          this.$refs.scroll.finishPullUp();
        })
        .catch(err => {});
    },
    /**
     * tab点击
     */
    tabclick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
        default:
          break;
      }
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },
    // backclick() {
    //   this.$refs.scroll.scrollTo(0, 0, 500);
    // },
    handleScroll(pos) {
      this.isShowBackTop = -pos.y > 800;
      this.isFixedTab = -pos.y - 10 > this.tabOffsetTop;
    },
    handlePullingUp() {
      this.getGoods(this.currentType);
    },
    swiperImgLoad() {
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    }
  },
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0, this.scrollY, 0);
  },
  deactivated() {
    this.scrollY = this.$refs.scroll.getScrollY();
    this.$bus.$off("goodsItemImgLoad", this.refresh);
  }
};
</script>

<style scoped>
#home {
  padding-top: 44px;
  height: 100vh;
}
.home-nav {
  background: var(--color-tint);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.home-scroll {
  height: calc(100% - 50px);
  overflow: hidden;
}

.tab-control-clone {
  position: relative;
  z-index: 2;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.3);
}
</style>